<template>
	<view class="group_box">
		<view class="gb_datails" @click="goGroupBuy()">
			<image class="absolute" src="https://img.jinghushi.com/images/9/2025/10/LPyZPpcWNrg8zpOrEGOoF3C3cdqDnw.png"
				></image>
			<view class="absolute tb flex">
				<view class="gd_left">
					<view class="card">共计发团权益卡：{{validNum}}张</view>
					<view class="tishi">
						注意：发团权益卡有时效性请及时使用
					</view>
				</view>
				<view class="gb_right">
					<image src="https://img.jinghushi.com/images/9/2025/10/T3kP70n5Sy56rxA7parY3lKKA2p050.png" mode="widthFix">
					</image>
				</view>
			</view>
		</view>
		<view class="flex_between my_tab" :class="{'isTitScroll':isTitScroll}">
			<view class="my_tab_it" @click="changeType(item.id)" :class="{'my_tab_it_ac':item.id==tabCur}"
				v-for="item in tab">{{item.name}}</view>
		</view>
		<view class="my_content">
			<view class="my_search flex_between">
				<input type="text" v-model="card_name" class="flex1" placeholder="请输入拼团名称">
				<view class="search flex_center" @click="search">
					<view>搜索</view>
					<image src="https://img.jinghushi.com/images/9/2025/10/pwxpxmGJNE1GXGgapYJVFnm3nyKwF1.png"
						mode="widthFix"></image>
				</view>
			</view>
			<shareList :list="list" :isloading="isloading" :isempty="isempty" @changeInfo="changeInfo"
				@openShare="openShare" />
		</view>
	</view>
</template>

<script>
	import shareList from '@/components/share-list.vue';
	import {throttle} from 'lodash'
	export default {
		components: {
			shareList,
		},
		data() {
			return {
				tab: [{
						id: 0,
						name: '全部拼团'
					},
					{
						id: 1,
						name: '正在拼团'
					},
					{
						id: 2,
						name: '拼团成功'
					},
					{
						id: 3,
						name: '拼团失败'
					},
				],
				tabCur: 0,
				card_name: '',
				isloading: false,
				isempty: false,
				list: [],
				page: 0,
				type: '',
				shareInfo: {},
				isTrusteeship: 0,
				validNum: 0,
				isTitScroll: false,
			};
		},
		onLoad(options) {
			if (options.type) {
				this.type = options.type;
			}


		},
		onTabItemTap() {
			this.init()
		},
		onShow() {
			this.getCreditinfo()
			this.init()
		},
		onPageScroll(e) {
			this.isTitScroll = e.scrollTop > 60
		},
		async onShareAppMessage() {
			return {
				title: this.shareInfo.title,
				path: this.shareInfo.url,
				imageUrl: this.shareInfo.imgurl
			}
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			init: throttle(function() {
				this.page = 0;
				this.list = [];
				this.getList();
			}, 500, {
				leading: true,
				trailing: false
			}),
			// 获取余额
			async getCreditinfo() {
				let res = await this.$axios('Group/getCreditInfo', 'POST', 'pintuan')
				if (res.data.code == 200) {
					this.validNum = res.data.data.rightsCreditRemain || 0
				}
			},
			goGroupBuy() {
				uni.navigateTo({
					url: '/pages/groupbuy/fagroup'
				})
			},
			changeInfo(e) {
				this.shareInfo = e;
			},
			search() {
				this.page = 0;
				this.list = [];
				this.getList();
			},
			changeType(id) {
				if (id == this.tabCur) return;
				this.tabCur = id;
				this.page = 0;
				this.list = [];
				this.getList();
			},
			getList() {
				this.page++;
				this.isloading = true;
				this.isempty = false;
				const typeIdx = this.tabCur;
				let url = '';
				if (this.type == 'self') {
					url = 'Group/leaderGroup';
				} else {
					url = 'Group/myGroup'
				}
				this.$axios(url, 'POST', 'pintuan', {
					page: this.page,
					status: this.tabCur,
					card_name: this.card_name,
					limit: 10
				}).then(res => {
					this.isloading = false;
					if (typeIdx != this.tabCur) {
						return;
					}
					if (res.data.code == 200) {
						this.list = [...this.list, ...res.data.data.list];
						this.isempty = res.data.data.list.length <= 0;
					}
				})
			},
			changeOpen(idx, status) {
				this.list[idx].openStatus = status;
				this.$forceUpdate()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fdf8ff;
		color: #13001E;
		font-family: Microsoft YaHei;
		padding-bottom: 50rpx;
	}

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.gb_datails {
		width: 710rpx;
		height: 120rpx;
		margin: 10rpx auto;
		position: relative;
		color: #fff;
		padding: 20rpx;

		.absolute {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.tb {
			padding: 20rpx;

		}

		.gd_left {
			.card {
				font-size: 28rpx;
				font-weight: bold;
			}

			.tishi {
				margin-top: 10rpx;
				font-size: 20rpx;
			}
		}

		.gb_right {
			image {
				width: 156rpx;
				height: 40rpx;
			}
		}
	}

	.my-info-wp {
		background: #fff;

		.my-info {
			background: url('https://img.jinghushi.com/images/9/2025/09/FRoGnSMRi0aTtI0xX0SqOXrPGAZgPa.png') no-repeat 0 0, #fff, ;
			background-size: 100% 228rpx;
			width: 710rpx;
			border-radius: 24rpx;
			box-shadow: inset 8rpx 8rpx 20rpx 0rpx #FFFFFF;
			margin: 0 auto;
			position: relative;
			padding: 0 20rpx 20rpx;

			.t-t {
				position: absolute;
				left: 19rpx;
				top: 18rpx;
				width: 444rpx;
				height: 44rpx;
			}

			.shop-card {
				display: flex;
				align-items: center;
				color: #fff;
				font-weight: bold;
				font-size: 24rpx;
				position: absolute;
				top: 44rpx;
				right: 44rpx;
			}

			.shop-yue {
				padding-top: 64rpx;
				font-size: 28rpx;

				.s-y-money {
					font-size: 28rpx;
					font-weight: bold;
				}

				.s-y-item {
					display: flex;
					align-items: center;

					.s-y-i-s {
						display: flex;
						align-items: center;

						.c-switch {
							transform: scale(0.7);
						}

						.status {
							color: #666;
						}
					}
				}

				.msg {
					color: red;
					font-size: 22rpx;
				}
			}

			.g-yue {
				display: flex;
				padding-top: 20rpx;

				.g-y-i {
					width: calc(100% / 3);
					line-height: 40rpx;
					position: relative;

					&::after {
						position: absolute;
						background: linear-gradient(270deg, rgba(158, 158, 158, 0) 0%, rgba(158, 158, 158, 0.5479) 55%, rgba(158, 158, 158, 0) 100%);
						content: '';
						height: 84rpx;
						width: 4rpx;
						top: 50%;
						transform: translateY(-50%);
						right: 20rpx;
					}

					.g-y-i-t {
						display: flex;
						align-items: center;
						font-size: 24rpx;
					}

					.num {
						font-weight: bold;
						max-width: 100%;
						word-break: break-all;
					}
				}

				.g-y-i:last-child::after {
					height: 0;
				}
			}
		}

	}

	.native-share-btn {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 1;
		background: red;
		z-index: 1;
	}

	.my_tab {
		background: #fff;
		padding: 20rpx 30rpx;
		width: 100%;

		.my_tab_it {
			color: #13001E;
			font-weight: bold;
			font-size: 28rpx;
		}

		.my_tab_it_ac {
			position: relative;

			&::before {
				content: "";
				display: block;
				width: 96rpx;
				height: 12rpx;
				background: #8813E2;
				opacity: .8;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
			}
		}

	}

	.my_content {
		padding: 20rpx;
	}

	.my_search {
		input {
			border: 2rpx solid #CCCACD;
			background: #FFFFFF;
			border-radius: 16rpx;
			height: 64rpx;
			padding: 0 20rpx;
		}
	}

	.search {
		background: #9A1FE8;
		width: 160rpx;
		height: 64rpx;
		border-radius: 16rpx;
		color: #FFFFFF;
		font-weight: bold;
		margin-left: 16rpx;

		image {
			width: 36rpx;
			margin-left: 6rpx;
		}
	}

	.share-more {
		width: 80%;
		background: linear-gradient(98deg, #FF38E5 0%, #8813E2 61%);
		color: #fff;
		text-align: center;
		line-height: 84rpx;
		font-size: 28rpx;
		font-weight: bold;
		border-radius: 24rpx;
		position: fixed;
		bottom: 20rpx;
		left: 10%;
		z-index: 100;
	}

	.isTitScroll {
		position: fixed;
		// top: 90px;
		top: 0;
		/* #ifdef H5 */
		top: calc(var(--window-top));
		/* #endif */
		z-index: 98;
		width: 100%;
		/* 提高层级，避免被遮挡 */
	}
</style>